<template>
	<el-row :gutter="10">
		<el-col :span="5"
			><el-input
				v-model="name"
				class="w-50 m-2"
				clearable
				placeholder="请输入歌曲名称"
		/></el-col>
		<el-col :span="6">
			<el-button type="primary" @click="search">搜索</el-button>
		</el-col>
	</el-row>
	<!-- 默认/搜索 -->
	<!-- <el-table
		:data="data"
		style="width: 100%; margin: 15px 0"
		@cell-dblclick="listen"
		border
	>
		<el-table-column type="index" label="序号" width="60" align="center" />
		<el-table-column prop="name" label="音乐标题" />
		<el-table-column prop="ar[0].name" label="歌手" />
		<el-table-column prop="al.name" label="专辑" />
		<el-table-column prop="address" label="时长">
			<template v-slot="scope">
				0{{ (scope.row.dt / 1000 / 60).toFixed(2) }}
			</template>
		</el-table-column>
		<el-table-column prop="address" label="下载" width="90" align="center">
			<template v-slot="scope">
				<el-icon :size="20"><download /></el-icon>
			</template>
		</el-table-column>
	</el-table> -->
	<!-- 每日推荐 -->

	<el-tabs v-model="activeName" class="demo-tabs">
		<el-tab-pane label="歌曲列表" name="first">
			<el-table
				highlight-current-row
				:data="dataFm"
				style="width: 100%"
				@cell-dblclick="listen"
				@cell-click="tableClick"
				:row-style="setRowStyle"
				border
				ref="table"
			>
				<el-table-column type="index" label="序号" width="60" align="center" />
				<el-table-column prop="name" label="音乐标题" />
				<el-table-column prop="ar[0].name" label="歌手" />
				<el-table-column prop="al.name" label="专辑" />
				<el-table-column prop="address" label="时长">
					<template v-slot="scope">
						0{{ (scope.row.dt / 1000 / 60).toFixed(2) }}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="下载" width="90" align="center">
					<template v-slot="scope">
						<el-icon :size="20"><download /></el-icon>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
		<el-tab-pane label="最新评论" name="second">
			<div style="min-height: 600px">
				<el-empty
					v-if="hotComments.length < 1"
					description="请选择音乐之后查看"
				/>
				<div
					v-for="(item, index) in hotComments"
					:key="index"
					style="
						display: flex;
						align-items: center;
						font-size: 14px;
						margin-top: 15px;
					"
				>
					<img
						:src="item.user.avatarUrl"
						alt=""
						style="
							width: 40px;
							height: 40px;
							border-radius: 50%;
							margin-right: 15px;
						"
					/>
					{{ item.user.nickname }}：{{ item.content }}
				</div>
			</div>
		</el-tab-pane>
	</el-tabs>

	<!-- 播放 -->
	<div class="pause">
		<el-icon :size="60"><caret-left /></el-icon>
		<el-icon :size="60" v-if="isListen" @click="playOrPause"
			><video-pause
		/></el-icon>
		<el-icon :size="60" v-else @click="playOrPause"><video-play /></el-icon>
		<el-icon :size="60"><caret-right /></el-icon>
		<el-progress
			:text-inside="true"
			:stroke-width="24"
			:percentage="percentage"
			status="success"
		/>
	</div>
	<audio ref="audio" loop controls autoplay :src="mp3Url" style="display: none">
		（该浏览器不支持音频播放组件）
	</audio>
</template>

<script setup>
import {
	VideoPause,
	VideoPlay,
	CaretLeft,
	CaretRight,
	Star,
	Download,
} from "@element-plus/icons-vue";
import { reactive, ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import {
	getList,
	getSongUrl,
	searchSongs,
	recommend,
	getComment,
} from "@/api/index";
import { getCurrentInstance } from "@vue/runtime-core";
import { ElNotification } from "element-plus";

const cookie = localStorage.getItem("cookie");
const router = useRouter();

const activeName = ref("first");
const data = ref([]);
let listenRow = reactive({});
const dataFm = ref([]);
const hotComments = ref([]);
let isListen = ref(false);
let percentage = ref(0); /* 播放进度 */

const mp3Url = ref(
	/* 默认音乐 */
	"http://m701.music.126.net/20220426132728/7eb8faa7f76d3b69e0e864ed46727a18/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14096638224/109d/24fb/297a/ac7892f3434cae208e5da1b73a9647f7.mp3"
);
let name = ref(""); /* 音乐 */

const currentInstance = getCurrentInstance(); //特殊方法使用 refs

const playOrPause = () => {
	if (isListen.value) {
		currentInstance.ctx.$refs.audio.pause(); //暂停
	} else {
		currentInstance.ctx.$refs.audio.play(); //播放
	}
	isListen.value = !isListen.value; //取反
};

/* 获取歌曲数据(默认列表) */
// getList().then((res) => {
// 	data.value = res.songs;
// });

/* 每日推荐 */
recommend({
	cookie,
	limit: 20,
}).then((res) => {
	dataFm.value = res.data.dailySongs;
});

/* 搜索跳转到列表页面 */
const search = () => {
	if (name.value) {
		searchSongs({
			keywords: name.value,
		}).then((res) => {
			console.log(res);
			data.value = res.result.songs;
		});
	} else {
		ElNotification.error("请输入关键词~~");
	}
};

/* 获取歌曲播放地址 */
const listen = (row) => {
	listenRow = row; //当前播放的 row
	currentInstance.ctx.$refs.table.setCurrentRow(row, true);
	isListen.value = true;
	/* 播放 */
	getSongUrl({ id: row.id }).then((res) => {
		mp3Url.value = res.data[0].url;
		if (res.data[0].url) {
			/* 存在Url */
			currentInstance.ctx.$refs.audio.play(); //播放
			/* 定时获取播放进度 */
			if (currentInstance.ctx.$refs.audio) {
				setInterval(() => {
					// 播放时间/总时间 取百分比
					percentage.value = parseInt(
						(currentInstance.ctx.$refs.audio.currentTime * 100) /
							currentInstance.ctx.$refs.audio.duration
					);
				}, 1000);
			}
		} else {
			ElNotification.error("当前音乐不可播放");
		}
	});
	/* 获取评论 */
	getComment({
		id: row.id,
		limit: 20,
		// cookie
	}).then((res) => {
		console.log(res, "res");
		hotComments.value = res.comments;
	});
};
/* 单选取消高亮 */
const tableClick = (row) => {
	currentInstance.ctx.$refs.table.setCurrentRow(listenRow, true);
};
/* 设置选中 */
const setRowStyle = (row) => {
	if (row.row.id == listenRow.id) {
		return "color:#409EFF;";
	}
};
</script>

<style scoped>
.pause {
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 50%;
	z-index: 10;
}
</style>
